import React, { Component } from 'react';
import { Button, Row, Col, } from 'antd';
import { Link } from 'react-router';
import './Server.less';

export default class Server extends Component {
  onChange(index) {
    // console.log(index);
  }

  render() {
    return (
      <div className="block-server">
        <Row className="row-slogan">
          <Col span={24}>
            <img src={require('./../img/banner/2.png')} alt="banner" />
            <article>
              <h3>云主机</h3>
              <span>云主机为您提供安全可靠的弹性计算服务。 只需几分钟便可以在云端获取和启用虚机，来实现您的计算需求。随着业务需求的变化，您可以实时扩展或缩减计算资源。按实际使用的资源计费，可以为您节约计算成本。提升运维效率，使您更专注于核心业务创新</span>
              <p>
                <Button size="large" type="primary">立即购买</Button>
                <Button size="large" ghost>管理控制台</Button>
                <Link to='/price/server'><Button size="large" ghost>产品价格</Button></Link>
              </p>
            </article>
          </Col>
        </Row>

        <div className="wrap-brief">
          <Row className="row-title">
            <Col span={24}>
              <h5>产品概述</h5>
              <p>我们致力于提供一个平台，使计算资源的交付更加简单、高效、可靠，甚至更环保</p>
            </Col>
          </Row>
          <Row className="row-product">
            <Col span={8}>
              <article className="col-inner">
                <img src={require('./../img/os/ubuntu.png')} alt="Ubuntu os" />
                <p><i className="icon icon-ubuntu"></i>Ubuntu</p>
              </article>
              <h6>体验 Ubuntu 系统 云主机</h6>
            </Col>
            <Col span={8}>
              <article className="col-inner">
                <img src={require('./../img/os/centos.png')} alt="CentOS os" />
                <p><i className="icon icon-centos"></i>CentOS</p>
              </article>
              <h6>体验 CentOS 系统云主机</h6>
            </Col>
            <Col span={8}>
              <article className="col-inner">
                <img src={require('./../img/os/windows.png')} alt="Windows os" />
                <p><i className="icon icon-windows"></i>Windows</p>
              </article>
              <h6>体验 Windows 系统 云主机</h6>
            </Col>
          </Row>
        </div>

        <div className="wrap-goodness">
          <Row className="row-title">
            <Col span={24}>
              <h5>产品优势</h5>
            </Col>
          </Row>
          <Row className="row-product">
            <Col span={8}>
              <i className="icon icon-tanxing"></i>
              <p><strong>弹性计算</strong><br />秒级启动，快速增加或删减云服务器，服务器规模可以按需要自动扩张和缩减，以满足您快速变化的业务需求。</p>
            </Col>
            <Col span={8}>
              <i className="icon icon-linghuo"></i>
              <p><strong>灵活配置</strong><br />我们提供多种实例类型，操作系统和软件包供您选择。每个实例中的CPU、内存、硬盘和带宽也可以灵活调整。</p>
            </Col>
            <Col span={8}>
              <i className="icon icon-wending"></i>
              <p><strong>稳定可靠</strong><br />自动宕机迁移，自动快照备份，数据恢复更方便云硬盘批量在线备份，且可随时回滚到某一个备份点</p>
            </Col>
          </Row>
          <Row className="row-product">
            <Col span={8}>
              <i className="icon icon-jiandan"></i>
              <p><strong>简单易用</strong><br />丰富的操作系统和应用软件，通过镜像可一键简单部署同一镜像可在多台云主机中快速复制环境，轻松扩展</p>
            </Col>
            <Col span={8}>
              <i className="icon icon-jifei"></i>
              <p><strong>计费灵活</strong><br />高性价比，支持包年包月或按量计费，满足不同需求无需服务器网络和硬件等维护，0 成本运维</p>
            </Col>
            <Col span={8}>
              <i className="icon icon-tuozhan"></i>
              <p><strong>可拓展性</strong><br />云主机可与云应用市场中提供的各种丰富的云产品无缝衔接，可持续为业务发展提供完整的计算、存储、安全等解决方案</p>
            </Col>
          </Row>
        </div>

        <div className="wrap-recommend">
          <Row className="row-title">
            <Col span={24}>
              <h5>产品推荐</h5>
            </Col>
          </Row>
          <Row className="row-product">
            <Col span={8}>
              <article>
                <h6>通用网络增强型 (sn2ne)</h6>
                <div className="cont">
                  <div className="top">
                    <span>处理器与内存资源配比为1:4，具有均衡的计算、内存、网络资源, 适用于</span>
                    <p>高网络包收发场景，</p>
                    <p>各种类型和规模的企业级应用</p>
                    <p>中小型数据库系统、缓存、搜索集群</p>
                  </div>
                  <div className="bottom">
                    <p>sn2ne.xlarge</p>
                    <p>CPU 4vCPU 16G</p>
                    <p>带宽 0.8Gbps</p>
                    <p>收发包 30万PPS</p>
                    <p className="price"><strong>￥ 309.60 </strong>元/月 起</p>
                    <Button type="primary" size="large">购买该配置</Button>
                  </div>
                </div>
              </article>
            </Col>
            <Col span={8}>
              <article>
                <h6>通用网络增强型 (sn2)</h6>
                <div className="cont">
                  <div className="top">
                    <span>处理器与内存资源配比为1:4，具有均衡的计算、内存、网络资源, 适用于</span>
                    <p>各种类型和规模的企业级应用</p>
                    <p>中小型数据库系统、缓存、搜索集群</p>
                    <p>计算集群、依赖内存的数据处理</p>
                  </div>
                  <div className="bottom">
                    <p>sn2.large</p>
                    <p>CPU 4vCPU 16G</p>
                    <p>带宽 0.8Gbps</p>
                    <p>收发包 10万PPS</p>
                    <p className="price"><strong>￥ 296.30 </strong>元/月 起</p>
                    <Button type="primary" size="large">购买该配置</Button>
                  </div>
                </div>
              </article>
            </Col>
            <Col span={8}>
              <article>
                <h6>通用型 (g5)</h6>
                <div className="cont">
                  <div className="top">
                    <span>处理器与内存资源配比为1:4，具有均衡的计算、内存、网络资源, 适用于</span>
                    <p>企业通用各种使用场景的计算需求</p>
                    <p>中小型数据库、需要一定内存的数据处理、缓存集群和其他企业应用程序的后端服务器场景</p>
                  </div>
                  <div className="bottom">
                    <p>g5.xlarge</p>
                    <p>CPU 4vCPU 16G</p>
                    <p>带宽 1.5Gbps</p>
                    <p>收发包 30万PPS</p>
                    <p className="price"><strong>￥ 324.60 </strong>元/月 起</p>
                    <Button type="primary" size="large">购买该配置</Button>
                  </div>
                </div>
              </article>
            </Col>
          </Row>
        </div>

      </div>
    )
  }
}